<template>
  <div class="register-web">
    <div class="header-wrapper">
      <div class="pic">图片</div>
      <div class="text2">捷联运</div>
      <div class="text3">用户注册</div>
    </div>
    <div class="content-wrapper">
      <div class="content-left">
        <div class="title">欢迎来到捷联运</div>
        <div class="">
          <div class="left-row">
            <div><img alt="" class="img" src="../images/icon1.png"></div>
            <div class="text-box">
              <div class="big-text">稳定</div>
              <div class="s-text">大企货源，稳定量大</div>
            </div>
          </div>
          <div class="left-row">
            <div><img alt="" class="img" src="../images/icon2.png"></div>
            <div class="text-box">
              <div class="big-text">公正</div>
              <div class="s-text">运价公正，透明竞争</div>
            </div>
          </div>
          <div class="left-row">
            <div><img alt="" class="img" src="../images/icon3.png"></div>
            <div class="text-box">
              <div class="big-text">保障</div>
              <div class="s-text">资金保障，结算快速</div>
            </div>
          </div>
        </div>
      </div>
      <div class="content-right">
        <div class="right-container">
          <div v-if="currentsStep<3"  class="step">
            <div v-for="(item , index) in stepList" :key="index" class="step-li">
              <div :class="[currentsStep >=item.step ? 'active' : '']" class="pic"><img :src="item.img" alt="" class="step-pic"></div>
              <div :class="[currentsStep >=item.step ? 'active' : '']" class="text">{{ item.name }}</div>
            </div>
          </div>
          <div v-if="currentsStep<3"  class="form-card">
            <el-form ref="editForm" :model="editForm">
              <div v-if="currentsStep === 0" class="select-row">
                <div
                  :class="[
                    'select-item',
                    editForm.roleType === 1 ? 'active' : ''
                  ]"
                  @click="changeSelectType(1)"
                >
                  <div class="item-box">
                    <div><img alt="" class="card-pic" src="../images/chengyunshang.png"></div>
                  </div>
                  <div class="item-text">我是承运商</div>
                </div>
                <div
                  :class="[
                    'select-item',
                    editForm.roleType === 2 ? 'active' : ''
                  ]"
                  @click="changeSelectType(2)"
                >
                  <div class="item-box">
                    <div><img alt="" class="card-pic" src="../images/huozhu.png"></div>
                  </div>
                  <div class="item-text">我是货主企业</div>
                </div>
              </div>
              <div v-if="currentsStep === 1" class="phone-valid">
                <div class="second-form">
                  <el-form-item
                    :rules="[{ required: true, message: '请输入手机号' }]"
                    label=""
                    prop="signPhone"
                  >
                    <el-input
                      v-model="editForm.signPhone"
                      class="inputFund"
                      clearable
                      maxlength="11"
                      placeholder="请输入手机号"
                      type="number"
                    ></el-input>
                  </el-form-item>
                  <el-form-item class="second-item" label="" prop="isPassing">
                    <drag-verify
                      ref="dragVerify"
                      :circle="true"
                      :height="50"
                      :isPassing.sync="editForm.isPassing"
                      :width="400"
                      background="#ff0000"
                      handlerIcon="el-icon-d-arrow-right"
                      progressBarBg="#79c23d"
                      successIcon="el-icon-circle-check"
                      successText="验证通过"
                      text="右滑解锁"
                      textColor="#fff"
                      type="round"
                      @passcallback="passcallback"
                    >
                    </drag-verify>
                  </el-form-item>
                  <el-form-item
                    :rules="[{ required: true, message: '请输入验证码' }]"
                    class="second-item"
                    label=""
                    prop="messageCode"
                  >
                    <div class="code-box">
                      <el-input
                        v-model="editForm.messageCode"
                        :disabled="!hasSendCode"
                        class="inputFund"
                        clearable
                        maxlength="20"
                        placeholder="请输入验证码"
                        type="number"
                      ></el-input>
                      <el-button
                        :disabled="
                          countdown > 0 ||
                            !editForm.isPassing ||
                            editForm.signPhone == ''
                        "
                        class="item-button"
                        @click="sendCode"
                      >
                        {{
                          countdown > 0
                            ? `${countdown}秒后重新获取`
                            : "获取验证码"
                        }}
                      </el-button>
                    </div>
                  </el-form-item>
                  <el-form-item
                    class="second-item"
                    label=""
                    prop="invitationCode"
                  >
                    <el-input
                      v-model="editForm.invitationCode"
                      class="inputFund"
                      clearable
                      maxlength="8"
                      placeholder="请输入8位数字邀请码 (可不填)"
                    ></el-input>
                  </el-form-item>
                </div>
              </div>
              <div v-if="currentsStep===2" class="phone-valid">
                <div class="second-form" style="width: 400px">
                  <el-form-item
                    label=""
                    prop="corpName"
                    class="second-item"
                    :rules="[{ required: true, message: '请输入企业名称' }]"
                  >
                    <el-input
                      maxlength="40"
                      placeholder="请输入企业名称"
                      clearable
                      v-model="editForm.corpName"
                    ></el-input>
                  </el-form-item>
                  <el-form-item
                    label=""
                    prop="webgisPassword"
                    :rules="[
                    { required: true, message: '请输入登陆密码' },

                  ]"
                    class="second-item"
                  >
                    <el-input
                      show-password
                      maxlength="15"
                      placeholder="请设置8-20位数字和字母组合登陆密码"
                      clearable
                      v-model="editForm.webgisPassword"
                      type="password"
                    ></el-input>
                  </el-form-item>
                  <el-form-item
                    label=""
                    prop="confirmPassword"
                    :rules="[
                    { required: true, message: '请输入确认密码' },
                    {
                      validator: (rules, value, cb) =>
                        confirmPwdValidator(
                          rules,
                          value,
                          cb,
                          editForm.webgisPassword
                        )
                    }
                  ]"
                    class="second-item"
                  >
                    <el-input
                      show-password
                      maxlength="15"
                      placeholder="请确认登录密码"
                      clearable
                      v-model="editForm.confirmPassword"
                      type="password"
                      style="margin-bottom: 0;"
                    ></el-input>
                  </el-form-item>
                </div>
              </div>
            </el-form>
            <div v-if="currentsStep===1" style="width:100%">
              <div class="check-con">
                <el-checkbox></el-checkbox>
                <span class="agree">我已同意</span>
                <span class="link">《瓮福指挥物流平台服务协议》</span>
              </div>
              <div class="next-btn">下一步</div>
            </div>
            <div v-if="currentsStep===2" style="width:100%">
              <div class="next-btn" style="margin-top: 20px;">完成</div>
            </div>
          </div>

          <div class="success-con" v-if="currentsStep===3">
            <div>
              <div>
                <img src="../images/success.png" alt="">
              </div>
              <div class="text">企业认证成功！</div>
            </div>
            <div style="display: flex; margin-top: 50px;">
              <div class="btn btn-left" style="margin-top: 20px;">前往认证资质</div>
              <div class="btn btn-right" style="margin-top: 20px;">暂不认证</div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <PlatformNotice ref="platformNotice" @handleStep1="handleStep1"/>
  </div>
</template>
<script>
import PlatformNotice from "./platformNotice.vue";
import dragVerify from "./dragVerify.vue";

const stepList = [
  {
    step: 0,
    name: '角色选择',
    img: require("../images/step1.png"),
  },
  {
    step: 1,
    name: '验证手机',
    img: require("../images/step2.png"),
  },
  {
    step: 2,
    name: '账户信息',
    img: require("../images/step3.png"),
  },


]
export default {
  name: "registerWeb",
  components: {dragVerify, PlatformNotice},
  data () {
    return {
      currentsStep: 1,
      stepList: stepList,
      editForm: {
        roleType: null,
        signPhone: "",
        messageCode: "",
        confirmPassword: "",
        invitationCode: "",
        corpName: "",
        webgisPassword: "",
        isPassing: false
      },
      hasSendCode: false,
      userName: "",
      countdown: 0 // 倒计时时间
    };
  },
  methods: {
    changeSelectType (type) {
      this.editForm.roleType = type;
      this.$refs.platformNotice.open();
    },
    handleStep1 (val) {
      if (val) {
        this.currentsStep++;
      } else {
        this.editForm.roleType = null;
      }
    },
    passcallback () {
    },
    // 发送验证码
    async sendCode () {
    }
  }
};
</script>
<style lang="scss" scoped>
.register-web {
  width: 100%;
  height: 100vh;
  display: flex;
  flex-direction: column;
  box-sizing: border-box;
  background: url("../images/backGround.png") no-repeat;
  background-size: 100%;

  .header-wrapper {
    height: 50px;
    display: flex;
    align-items: flex-end;
    margin-left: 50px;

    .pic {
    }

    .text2 {
      font-size: 30px;
    }

    .text3 {
      color: #9FA0A5;
      font-weight: normal;
      font-size: 18px;
      margin-left: 20px;
    }
  }

  .content-wrapper {
    flex: 1;
    display: flex;
    position: relative;

    .content-left {
      width: 32%;
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: flex-end;
      box-sizing: border-box;

      .title {
        color: #000C3E;
        white-space: nowrap;
        font-size: 32px;
        font-weight: bold;
        height: 55px;
        line-height: 55px;
        margin-bottom: 20px;
      }

      .left-row {
        display: flex;
        margin: 20px 0;

        .img {
          width: 50px;
        }

        .text-box {
          margin-left: 40px;
          display: flex;
          flex-direction: column;
        }

        .big-text {
          font-size: 20px;
          font-weight: bold;
          margin-bottom: 20px;
          white-space: nowrap;
        }

        .s-text {
          font-size: 14px;
          color: #999;
          white-space: nowrap;
        }
      }
    }

    .content-right {
      flex: 1;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      box-sizing: border-box;

      .right-container {
        width: 636px;
        display: flex;
        flex-direction: column;
        align-items: center;
      }

      .step {
        display: flex;
        --img-width: 77px;

        .step-li {
          display: flex;
          flex-direction: column;
          align-items: center;
          position: relative;
          margin: 0 47px;

          .pic {
            width: var(--img-width);
            height: var(--img-width);
            border-radius: 50%;
            margin-bottom: 18px;
            display: flex;
            justify-content: center;
            align-items: center;
            background-color: rgba(238, 18, 27, 0.1);

            &.active {
              background-color: rgba(238, 18, 27, 0.2);
            }
          }

          .text {
            color: rgba(0, 12, 62, .5);
            font-size: 16px;
            font-weight: bold;

            &.active {
              color: rgba(0, 12, 62, 1);
            }
          }
        }

        .step-li:not(:last-child)::after {
          content: '';
          position: absolute;
          right: -93px;
          display: flex;
          width: 75px;
          height: 2px;
          background: #f58888;
          margin: calc(var(--img-width) / 2) 10px 0;

          &.active {
            background: red;
          }
        }
      }

      .form-card {
        .select-row {
          display: flex;
          gap: 20px;
          justify-content: space-between;
          margin-top: 80px;

          .select-item {
            flex: 1;
            width: 270px;
            height: 230px;
            border-radius: 10px;
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: space-between;
            cursor: pointer;
            background: #fff;
            box-shadow: 0 0 10px #ffe9eb;

            &.active {
              border: 3px solid #EE121B;
            }

            .card-pic {
              margin-top: 20%;
            }

            .item-text {
              font-size: 16px;
              color: #bbbbbb;
              height: 50px;
              display: flex;
              align-items: center;
              justify-content: center;
            }
          }
        }

        .phone-valid {
          display: flex;
          flex-direction: column;
          padding: 20px;
          margin: 10px;
          box-sizing: border-box;
          background-color: #fff;
          border-radius: 20px;
          box-shadow: 0 0 15px 10px rgba(255, 221, 223, .5);


          .second-form {
            display: flex;
            flex-direction: column;
          }

          .code-box {
            position: relative;

            .item-button {
              position: absolute;
              right: 0;
              background: none;
              border: none;
              color: #f03139;
            }
          }

        }

        .check-con {
          color: #999;
          margin: 10px 0 20px 5px;

          .agree {
            margin: 0 10px;
          }

          .link {

            color: #ee131b;
          }
        }

        .next-btn {
          width: 98%;
          height: 40px;
          line-height: 40px;
          text-align: center;
          color: #fff;
          background-color: #ee131b;
          border-radius: 20px 20px 20px 20px;
          cursor: pointer;
        }
      }

      //成功
      .success-con{
        margin-top: -15%;
        width: 100%;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        .text{
          font-size: 18px;
          color: #000C3E;
          line-height: 41px;
        }
        .btn{
          width: 160px;
          height: 40px;
          line-height: 40px;
          text-align: center;
          color: #fff;
          background-color: #ee131b;
          border-radius: 20px 20px 20px 20px;
          cursor: pointer;
          margin-right: 20px;
        }
        .btn-right{
          color: #000;
          background-color: #fff;
        }
      }
    }
  }
}

::v-deep {
  .inputFund input::-webkit-inner-spin-button {
    -webkit-appearance: none !important;
  }

  .inputFund input[type="number"] {
    -moz-appearance: textfield;
  }

  .el-input__inner {
    border-radius: 25px;
    background-color: #fff3f4;
  }
}
</style>
